<!-- 购物车商品卡片样式组件 -->
<template>
  <div class="product-card" v-for="item in productList" :key="item.shopName">
    <div class="shop-name">{{ item.shopName }}</div>
    <productList :product="item.showList"></productList>
    <component :is="cardStyle" @show="handleShow" v-if="item.showMore" :product="item.moreList"
      :count="item.productList.length">
    </component>
  </div>
</template>

<script>
import { ref } from "vue";
import moreProduct from "./moreProduct.vue";
import productList from "./productList.vue";
import data from '@/api/simulate';
// 展示更多按钮
const useShow = (cardStyle) => {
  const handleShow = () => cardStyle.value = cardStyle.value === 'moreProduct' ? 'productList' : 'moreProduct'
  return { handleShow }
}
// 处理数据格式
const useDataFormat = (data) => {
  let productList = data;
  productList.map(item => {
    if (item.productList.length > 2) {
      item.showMore = true;
      item.showList = item.productList.slice(0, 2);
      item.moreList = item.productList.slice(2);
    } else {
      item.showMore = false;
      item.showList = item.productList;
      item.moreList = [];
    }
  });
  return { productList }
}
//composition
export default {
  name: 'productCard',
  props:['data'],
  components: { moreProduct, productList },
  setup(props) {
    const cardStyle = ref('moreProduct');
    const { productList } = useDataFormat(props.data?[props.data]:data);
    const { handleShow } = useShow(cardStyle);
    return { cardStyle, productList, handleShow }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/theme.scss';

.product-card {
  margin: 18px 16px;
  background-color: $white;
  border-radius: 4px;
  padding: 16px;
  padding-bottom: 1px;

  .shop-name {
    font-size: 16px;
    font-weight: bold;
    color: $theme-font-color;
    margin-bottom: 16px;
  }
}
</style>